<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable
      @register="registerTable"
      :rowSelection="{ type: 'checkbox', onChange: onSelectChange }"
    >
      <template #headerTop> </template>
      <template #toolbar>
        <a-button type="primary" @click="handleBatchDelete">批量删除</a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '删除',
                color: 'error',
                icon: 'ant-design:delete-twotone',
                popConfirm: {
                  title: '此操作将永久删除该数据, 是否继续？',
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: '补打条形码',
                color: 'success',
                icon: 'ant-design:redo-outlined',
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';

  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getBasicColumns, getFormConfig } from './column';
  import { batchDeletePhysical, deletePhysicalByID, getPhysicalList } from '@/api/peis/peis';
  import { message } from 'ant-design-vue';

  const checkedKeys = ref<Array<string | number>>([]);
  const [registerTable, { reload, getForm }] = useTable({
    title: '体检记录',
    api: getPhysicalList,
    columns: getBasicColumns(),
    useSearchForm: true,
    formConfig: getFormConfig(),
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: false,
    rowKey: 'id',
    clickToRowSelect: false,
    actionColumn: {
      width: 180,
      title: '编辑',
      dataIndex: 'action',
    },
  });
  function getFormValues() {
    console.log(getForm().getFieldsValue());
  }
  // 选中事件
  function onSelectChange(selectedRowKeys: (string | number)[]) {
    checkedKeys.value = selectedRowKeys;
  }
  // 删除事件
  async function handleDelete(record: Recordable) {
    await deletePhysicalByID({ id: record.id }).then((res) => {
      if (res.code === 0) {
        message.success('操作成功');
        reload();
      } else {
        message.error(res.msg);
      }
    });
  }
  // 批量删除
  function handleBatchDelete() {
    if (!checkedKeys.value.length) {
      message.error('请至少选择一条数据删除');
      return false;
    }
    useMessage().createConfirm({
      iconType: 'info',
      title: '提示',
      content: '此操作将永久删除该数据, 是否继续？',
      onOk: () => {
        batchDeletePhysical(checkedKeys.value).then((res) => {
          if (res.code === 0) {
            message.success('操作成功');
            reload();
          } else {
            message.error(res.msg);
          }
        });
      },
    });
  }
</script>
